<%@ page contentType="text/html;charset=UTF-8" %> 
<%@ include file="/include.inc.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/views/layout/base.ref.jsp"%>
<link href="${ctx}/static/controls/zTree/css/zTreeStyle.css"  rel="stylesheet" type="text/css">
	<body>
	 <%@include file="/WEB-INF/views/login/home/toolbar.jsp"%>
	<form id="form1" runat="server">
<div class="mtcontent">
		<div class="mtbody">
			<div class="mtrow">
				<div class="mtcol">
						<h4 class="lighter smaller">菜单信息</h4>
						<ul id="menuTree" class="ztree"></ul>
				</div>
				<div class="mtcol2">
					<h4 class="lighter smaller">编辑菜单信息</h4>
					  <iframe id="treeEditFrame" style="height:100%;width:100%;" name="treeEditFrame" 
                    frameborder="no" scrolling="auto" marginheight="0"  onload="javascript:$('#treeEditFrame').height($(window).height() - 150);">您的浏览器不支持框架!</iframe>
				</div>
			</div>
		</div>
	</div>

</form>
</html>

<script src="${ctx}/static/controls/zTree/js/jquery.ztree.core.js" type="text/javascript"></script>
<script src="${ctx}/static/controls/zTree/js/jquery.ztree.excheck.js" type="text/javascript" ></script>
<script src="${ctx}/static/controls/zTree/js/jquery.ztree.exedit.js" type="text/javascript" ></script>
<script type="text/javascript">
		
	    var setting = {
	        view: {
	            showIcon: showIconForTree,
	            fontCss: getFont,
                addDiyDom: addDiyDom,
	            nameIsHTML: true
	        },

	        edit: {
	            enable: true,
	            showRemoveBtn: false,
	            showRenameBtn: false
	        },
	        data: {
	            key: {
	                name: "name"
	            },
	            simpleData: {
	                enable: true,
                    idKey: "id",
                    pIdKey: "parentId"
	            }
	        },
	        callback: {
	            onClick: onClickTree,
                beforeDrag: beforeDrag,
                beforeDrop: beforeDrop,
		        onDrop: zTreeOnDrop
	        }
	    };

	   

	    function beforeDrag(treeId, treeNodes) {
	        for (var i = 0, l = treeNodes.length; i < l; i++) {
	            if (treeNodes[i].id <= 0) {
	                return false;
	            }
	        }
	        return true;
	    }
	    function beforeDrop(treeId, treeNodes, targetNode, moveType) {
	        return targetNode ? targetNode.drop !== false : true;
	    }

	    var zNodes = ${sysWebMenulist};
	    
	    $(document).ready(function () {

	        $('#menuTree').height($(window).height() - 165);

	        zTree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
	        zTree.expandAll(true);
	        var node = zTree.getNodeByParam("id","${tid}",null);
			zTree.selectNode(node);
	        window.frames["treeEditFrame"].location = "${ctx}/sysWebMenu/edit?id=${tid}";

            var conodes = zTree.transformToArray(zTree.getNodes());
            for (var i = 0, l = conodes.length; i < l; i++) {
                conodes[i].font = {  'width': '80%', };
                zTree.updateNode(conodes[i]);
            }

	        zTree.setting.edit.drag.isCopy = true;
	        zTree.setting.edit.drag.isMove = true;


	        zTree.setting.edit.drag.prev = true;
	        zTree.setting.edit.drag.inner = true;
	        zTree.setting.edit.drag.next = true;

	    });

        function showIconForTree(treeId, treeNode) {
            return false;
        };

	    function getFont(treeId, node) {
	        return node.font ? node.font : {};
	    }

        function onClickTree(e, treeId, treeNode) {
            window.frames["treeEditFrame"].location.href = "${ctx}/sysWebMenu/edit?id=" + treeNode.id;
        }

        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            for (var i=0,l=treeNodes.length; i<l; i++) {
                UpdateSysDepartment(treeNodes[i].id,treeNodes[i].parentId);
            }
        };

        

        function addDiyDom(treeId, treeNode) {
		    var aObj = $("#" + treeNode.tId + "_a");
		    var editStr = "<span>" + treeNode.showOrder;
		
		    editStr = editStr + "</span>";
		    aObj.after(editStr);
        }


	</script>

